/**
 * Created by zhanglihe on 15/10/30.
 */
require.config(require_config);

define([
    'jquery',
    'common',
    'ready',
    'template',
    'collection',
    'model',
    'dialog',
    'd3',
    'bootstrap'
], function ($, common, ready, template, Collection, Model, dialog) {

    var index = function () {
        this.init();
    };
    index.prototype = {
        init: function () {
            var _this = this;
            var id = getUrlPath(3);
            _this.getData(id, 0);
            //loading()

            _this.root;
            _this.svg;
            _this.tree;
            _this.diagonal
            this.event();
            this.fetch();
        },

        fetch: function () {
            this.renderTree();
            //this.addItem();
            //this.nextItem();
            loaded();
        },

        renderTree: function () {

            var _this = this;
            var id = getUrlPath(3);

            //画布大小
            var width = 1000;
            var height = _this.item.count > 0 ? (_this.item.count) * 5 : 400;
            //边界空白
            var padding = {left: 80, right: 50, top: 20, bottom: 20};

            //设置画布位置
            _this.svg = d3.select("#tree-data")
                .append("svg")
                .attr("width", width + padding.left + padding.right)
                .attr("height", height + padding.top + padding.bottom)
                .append("g")
                .attr("transform", "translate(" + padding.left + "," + padding.top + ")");

            //树状图布局
            _this.tree = d3.layout.tree().size([height, width]);

            //对角线生成器
            _this.diagonal = d3.svg.diagonal().projection(function (d) {
                return [d.y, d.x];
            });

            _this.root = _this.item;
            //给第一个节点添加初始坐标x0和x1
            _this.root.x0 = height / 2;
            _this.root.y0 = 0;

            //以第一个节点为起始节点，重绘树状图
            _this.redraw(_this.root);
        },

        redraw: function (source) {
            var _this = this;
            //source._children = source.children;
            //source.children = null;
            /**计算节点和连线的位置**/
            //应用布局，计算节点和连线
            var nodes = _this.tree.nodes(_this.root);
            var links = _this.tree.links(nodes);

            //重新计算节点的y坐标
            nodes.forEach(function (d) {
                d.y = d.depth * 180;
            });

            /**节点的处理**/
            //获取节点的update部分
            var nodeUpdate = _this.svg.selectAll(".node")
                .data(nodes, function (d) {
                    return d.name;
                });

            //获取节点的enter部分
            var nodeEnter = nodeUpdate.enter();

            //获取节点的exit部分
            var nodeExit = nodeUpdate.exit();

            //1. 节点的 Enter 部分的处理办法
            var enterNodes = nodeEnter.append("g")
                .attr("class", "node")
                .attr("transform", function (d) {
                    return "translate(" + source.y0 + "," + source.x0 + ")";
                });


            enterNodes.append("circle")
                .attr("r", 0)
                .style("fill", function (d) {
                    return d._children ? "lightsteelblue" : "#fff";
                }).on("click", function (d) {
                _this.toggle(d);
                _this.redraw(d);
            });

            enterNodes.append("text")
                .attr("x", function (d) {
                    return d.children || d._children ? -14 : 14;
                })
                .attr("dy", ".35em")
                .attr("text-anchor", function (d) {
                    return d.children || d._children ? "end" : "start";
                })
                .text(function (d) {
                    return d.name;
                })
                .style("fill-opacity", 0)
                .on('click', function () {
                    var nickname = $(this).text();
                    $.ajax({
                        url: _global.url.api + 'agency/child_data',
                        type: 'post',
                        async: false,
                        data: {nickname: nickname},
                        success: function (res) {
                            if (res.code == 0) {
                                dialog({
                                    title: '分享家(' + nickname + ')',
                                    width: 500,
                                    content: template('add-tpl', {data: res.data}),
                                }).show();
                            } else {
                                alert('用户数据未找到');
                            }
                        }
                    });
                });


            //2. 节点的 Update 部分的处理办法
            var updateNodes = nodeUpdate.transition()
                .duration(500)
                .attr("transform", function (d) {
                    return "translate(" + d.y + "," + d.x + ")";
                });

            updateNodes.select("circle")
                .attr("r", 8)
                .style("fill", function (d) {
                    return d._children ? "lightsteelblue" : "#fff";
                });

            updateNodes.select("text")
                .style("fill-opacity", 1);

            //3. 节点的 Exit 部分的处理办法
            var exitNodes = nodeExit.transition()
                .duration(500)
                .attr("transform", function (d) {
                    return "translate(" + source.y + "," + source.x + ")";
                })
                .remove();

            exitNodes.select("circle")
                .attr("r", 0);

            exitNodes.select("text")
                .style("fill-opacity", 0);

            /*
             （3） 连线的处理
             */

            //获取连线的update部分
            var linkUpdate = _this.svg.selectAll(".link")
                .data(links, function (d) {
                    return d.target.name;
                });

            //获取连线的enter部分
            var linkEnter = linkUpdate.enter();

            //获取连线的exit部分
            var linkExit = linkUpdate.exit();

            //1. 连线的 Enter 部分的处理办法
            linkEnter.insert("path", ".node")
                .attr("class", "link")
                .attr("d", function (d) {
                    var o = {x: source.x0, y: source.y0};
                    return _this.diagonal({source: o, target: o});
                })
                .transition()
                .duration(500)
                .attr("d", _this.diagonal);

            //2. 连线的 Update 部分的处理办法
            linkUpdate.transition()
                .duration(500)
                .attr("d", _this.diagonal);

            //3. 连线的 Exit 部分的处理办法
            linkExit.transition()
                .duration(500)
                .attr("d", function (d) {
                    var o = {x: source.x, y: source.y};
                    return _this.diagonal({source: o, target: o});
                })
                .remove();


            /*
             （4） 将当前的节点坐标保存在变量x0、y0里，以备更新时使用
             */
            nodes.forEach(function (d) {
                d.x0 = d.x;
                d.y0 = d.y;
            });
        },

        /**
         * 切换开关  d为被点击的节点
         * @param d
         */
        toggle: function (d) {
            if (d.children) { //如果有子节点
                d._children = d.children; //将该子节点保存到 _children
                d.children = null;  //将子节点设置为null
            } else {  //如果没有子节点
                d.children = d._children; //从 _children 取回原来的子节点
                d._children = null; //将 _children 设置为 null
            }
        },


        addItem: function () {
            var _this = this;
            var item = _this.item;

            $.each(item, function () {
                var htm = '<tr class="item' + this.pid + '"><td width="200px">';
                for (var i = 0; i < this.depth - 1; i++) {
                    htm += '----';
                }
                htm += '昵称:(' + this.nickname + ')</td><td width="100px">自售:(' + this.amount + ')</td><td width="100px">下级:(' + this.childAmount + ')</td><td width="100px">小伙伴:(' + this.total + '人)</td>';
                if (this.total > 0) {
                    htm += '<td width="100px"><a title="展开下级" class="btn btn-sm btn-default item-data" href="javascript:" uid="' + this.id + '" depth="' + this.depth + '">展开下级</a></td>';
                } else {
                    htm += '<td width="100px"></td>';
                }
                htm += '</tr>';
                $('#data-item').append(htm);
            });

        },

        nextItem: function () {
            var _this = this;
            $('.item-data').on('click', function (e) {
                e.preventDefault;
                var uid = $(this).attr('uid');
                var depth = $(this).attr('depth');

                var txt = $(this).text();
                if (txt == '收起下级') {
                    $('.item' + uid).remove();
                    $(this).text('展开下级');
                } else {
                    _this.getData(uid, depth);
                    _this.addItem();
                    $(this).text('收起下级');
                }
            })
        },


        getData: function (id, depth) {
            depth = depth > 0 ? depth : 0;
            var _this = this;
            $.ajax({
                url: _global.url.api + 'agency/child_tree/' + id,
                type: 'get',
                async: false,
                data: {depth: depth},
                success: function (res) {
                    if (res.code == 0) {
                        _this.set('item', res.data);
                    }
                }
            });
        },
        set: function ($k, $v) {
            this[$k] = $v;
        },
        event: function () {
            var _this = this;

            /**
             * 搜索事件
             */
            $('#btn-search').on('click', function (e) {
                e.preventDefault();
                _this.collection.condition.keyword = $('input[name="keyword"]').val();
                _this.collection.reload();
            });
        },

        change: function (e) {
            this.data[$(e.target).attr('name')] = $(e.target).val();
        }

    };

    new index();

});